<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="true" %>
<c:set var="login" scope="session" value="${sessionScope.login}"/>
<c:set var="sname" scope="session" value="${sessionScope.userName}"/>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fresh Direct</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="${contextPath}"><img width="100" src="https://www.freshdirect.com/media/images/navigation/global_nav/fd_logo_on.gif"></img></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
          <li><h4>Welcome to FreshDirect!</h4></li>	
      </ul>
      <c:choose>
      <c:when test="${not empty sessionScope.userName}">
        <ul class="nav navbar-nav navbar-right">
          <li><div class="navbar-form">
              <a href="${contextPath}/user/mycart" type="button" class="btn btn-default">My Cart&nbsp;<span class="badge">${fn:length(cart.getProducts())}</span></a>
              </div></li>
          <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">${sessionScope.userName}<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="${pageContext.request.contextPath}/user/myaccount">My Account</a></li>
                <li><a href="${pageContext.request.contextPath}/user/myorders">My orders</a></li>
                 <li><a href="${pageContext.request.contextPath}/user/faq">FAQ</a></li>
                <li class="divider"></li>
                <li><a href="${pageContext.request.contextPath}/userout">Logout</a></li>
              </ul>
            </li>
      </ul>
        </c:when>
      <c:otherwise >
      <ul class="nav navbar-nav navbar-right">
      <li>
      <div class="navbar-form ">
      <a href="${contextPath}/signup" type="submit" class="btn btn-primary">Sign Up</a>
      </div>
      </li>
      <li>
      <form class="navbar-form "  action="${pageContext.request.contextPath}/user" method="POST">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="username" name="userName">
          <input type="password" class="form-control" placeholder="password" name="password">     
        </div>
        <button type="submit" class="btn btn-default">Sign In</button>
      </form>
      </li>
      </ul>
      </c:otherwise>
      </c:choose>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="container">
<div class="row">
        <nav class="navbar navbar-default" role="navigation" style="background-color: #728d4b; border-radius: 10px;">
  <div class="container-fluid" style="background-color: #728d4b; border-radius: 10px; ">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" style="background-color: #728d4b" id="bs-example-navbar-collapse-2">
      <ul class="nav navbar-nav" style="background-color: #728d4b">
        <li style="background-color: #728d4b"><a style="background-color: #728d4b; color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/fruits">FRUITS</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif; " href="${contextPath}/product/category/vegetables">VEGETABLES</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/seafood">SEAFOOD</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/meat">MEAT</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/dairy">DAIRY</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/bakerynpastry">BAKERY & PASTRY</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/cerealnpalses">CEREAL & PALSES</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/frozen">FROZEN</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/cans">CANNED FOOD</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/flowers">FLOWERS</a></li>
        <li><a style="color:white; font-size: 18px; font-weight: bold; font-family: 'Oswald', sans-serif;" href="${contextPath}/product/category/pet">PET</a></li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
                <div class="container">
                    <div class="row-fluid" style="text-align: center;"><h2><div style="font-family: 'Oswald', sans-serif; font-weight: bold; color:#FFAE19;">SEARCH PRODUCTS</div></h2><br></div>
                    <div class="row-fluid">
                        <div class="col-md-2" style=" border: 0 none;">
                            <div class="dropdown">
                                  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                                    Sort
                                    <span class="caret"></span>
                                  </button>
                                  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                      <li role="presentation"><a role="menuitem" tabindex="-1" href="${contextPath}/search?categories=${categories}&suppliers=${suppliers}&keywords=${keywords}&sort=priceasc">Price: Low to High</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="${contextPath}/search?categories=${categories}&suppliers=${suppliers}&keywords=${keywords}&sort=pricedesc">Price: High to Low</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="${contextPath}/search?categories=${categories}&suppliers=${suppliers}&keywords=${keywords}&sort=name">Product Name</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="${contextPath}/search?categories=${categories}&suppliers=${suppliers}&keywords=${keywords}&sort=supplier">Supplier</a></li>
                                  </ul>
                                </div>
                            <form role="form">
                            <ul  class="nav nav-sidebar">
                                <li class="active"><a>Categories</a>
                                   <fieldset>
                                   <div class="checkbox">
                                  <label><input type="checkbox" class="category" value="" checked>All</label>
                                   </div>
                                   <div class="checkbox">
                                  <label><input type="checkbox" class="category" value="1">Fruits</label>
                                   </div>
                                   <div class="checkbox">
                                  <label><input type="checkbox" class="category" value="2">Vegetables</label>
                                   </div>
                                   <div class="checkbox">
                                  <label><input type="checkbox" class="category" value="3">Seafood</label>
                                   </div>
                                   <div class="checkbox">
                                  <label><input type="checkbox" class="category" value="4">Meat</label>
                                   </div>
                                   <div class="checkbox">
                                  <label><input type="checkbox" class="category" value="5">Dairy</label>
                                   </div>
                                   <div class="checkbox">
                                  <label><input type="checkbox" class="category" value="6">Bakery & Pastry</label>
                                   </div>
                                   <div class="checkbox">
                                  <label><input type="checkbox" class="category" value="7">Cereal & Palses</label>
                                   </div>
                                  <div class="checkbox">
                                  <label><input type="checkbox" class="category" value="8">Frozen</label>
                                   </div>
                                   <div class="checkbox">
                                  <label><input type="checkbox" class="category" value="9">Canned Food</label>
                                   </div>
                                   <div class="checkbox">
                                  <label><input type="checkbox" class="category" value="10">Flowers</label>
                                   </div>
                                   <div class="checkbox">
                                  <label><input type="checkbox" class="category" value="11">Pet</label>
                                   </div>
                                   <input id='categories' type='hidden' name='categories' />
                                   </fieldset>
                                </li>
                                <li><a>Suppliers</a>
                                   <div class="checkbox">
                                  <label><input type="checkbox" class="supplier" value="" checked>All</label>
                                   </div>
                                   <div class="checkbox">
                                  <label><input type="checkbox" class="supplier" value="1">WholeFoods</label>
                                   </div>
                                   <div class="checkbox">
                                  <label><input type="checkbox" class="supplier" value="2">FreshLife</label>
                                   </div>
                                   <div class="checkbox">
                                  <label><input type="checkbox" class="supplier" value="3">OceanTreasure</label>
                                   </div>
                                    <div class="checkbox">
                                  <label><input type="checkbox" class="supplier" value="4">MeatMarket</label>
                                   </div>
                                     <div class="checkbox">
                                  <label><input type="checkbox" class="supplier" value="5">HealthyFoods</label>
                                   </div>
                                     <div class="checkbox">
                                  <label><input type="checkbox" class="supplier" value="6">UncleJohn Farm</label>
                                   </div>
                                     <div class="checkbox">
                                  <label><input type="checkbox" class="supplier" value="7">FarmVille Cop.</label>
                                   </div>
                                  <input id='suppliers' type='hidden' name='suppliers' />
                                </li>
                                <li><a>Keywords</a>
                                    <input type="text" name="keywords" class="form-control" style="width:150px" placeholder="Keywords">
                                    <br/>
                                </li>
                                <li>
                                    <button type="submit" class="btn btn-default">Search</button>
                                </li>
                              </ul>
                                </form>
                            </div>
                        <div class="col-md-10">
                            <div class="row-fluid">
                                <c:choose>
                                <c:when test="${fn:length(products) != 0}">
                                <ul class="thumbnails">
                                    <c:forEach var="product" items="${products}" varStatus="loop"> 
                                    <div class="col-xs-12 col-sm-4 col-md-3">
                                        <div class="thumbnail" style=" border: 0 none; height: 250px; width:150px;">
                                        <a style="text-decoration: none; color: black;" href="${contextPath}/product/${product.getId()}">
                                        <div style="height:80px;"><img src="${product.getImage()}" height="80" ></div>
                                        <br/>
                                        <div style="height:50px;"><h5>${product.getName()}</h5></div>
                                        </a>
                                        <h7>$${product.getPrice()}&nbsp;(up&nbsp;to&nbsp;&nbsp;${product.getQuantity()})</h7>
                                        <form action="${contextPath}/product/addtocart" >
                                            <input type="hidden" name="id" value="${product.getId()}">
                                            <div class="input-group">
                                            <input pattern="\d*" type="text" class="form-control" name="n" placeholder="">
                                            <span class="input-group-btn">
                                            <button type="submit" class="btn btn-primary" value="addproduct">Add to Cart</button>
                                            </span>
                                            </div>
                                        </form>
                                        </div>
                                    </div>
                                    </c:forEach>
                                </ul>
                                </c:when>
                                <c:otherwise>
                                    <div class="alert alert-warning" style="text-align: center;" role="alert">There are not products in ${id} category</div>
                                </c:otherwise>
                                </c:choose>
                        </div>
                        </div>
                        </div>
                        <br/><br/>
                    </div>
               

</div>
</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <!-- <script>-->
    <script>
    $('form').submit(function() {
    var arr=[];

    $('input:checked[class=category]').each(function(){
        arr.push($(this).val());
    });

    $('#categories').val(arr.join(','));
    
    arr=[];
    
    $('input:checked[class=supplier]').each(function(){
        arr.push($(this).val());
    });

    $('#suppliers').val(arr.join(','));
    //alert($('#category').val());

    // Prevent actual submit for demo purposes:
    //return false;
    });
</script>
  </body>
</html>